<template>
  <!-- 个人中心 -->
  <div class="my-info">
    <!-- 上面 -->
    <div class="user-top">
      <!-- 头像名字 -->
      <div class="login">
        <div class="imgs">
          <img src="@/assets/logo.jpg" />
        </div>
        <div>御寒</div>
      </div>
      <!-- 订单 -->
      <div class="order">
        <div class="order-list">
          <div class="order-img">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dingdan"></use>
            </svg>
          </div>
          <p>电影订单</p>
        </div>
        <div class="order-list">
          <div class="order-img">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-bangong"></use>
            </svg>
          </div>
          <p>商品订单</p>
        </div>
      </div>
    </div>

    <!-- 列表 -->
    <ul class="my-list">
      <li
        class="my-li"
        v-for="item in ulList"
        :key="item.nm"
        @click="showPopup(item.nm)"
      >
        <div class="icon-box">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="item.icon"></use>
          </svg>
        </div>
        <div class="nm">
          {{ item.nm }}
        </div>
        <div v-if="item.price" style="color: #9da0a4">
          <span style="font-size: 12px"> ￥</span>{{ myMoney }}
        </div>
        <div class="icon-box">
          <van-icon color="#d8d9dc" name="arrow" />
        </div>
      </li>
    </ul>
    <!-- 充值 -->
    <div class="add-money-box">
      <van-popup v-model="show">
        <h3>充值</h3>
        <div class="add-money">
          <p>充值金额：</p>
          <div class="input">
            <input type="number" placeholder="0" v-model="money" />
          </div>
          <span>元</span>
        </div>
        <!-- 按钮 -->
        <div class="btn" @click="addMoney(money)">充值</div>
      </van-popup>
    </div>
    <!-- <add-money
      :show="show"
      :money="money"
      @getshow="show = $event"
      @getmoney="money = $event" 
    ></add-money> -->
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      ulList: [
        {
          icon: "#icon-hongbao",
          nm: "余额",
          price: 200,
        },
        {
          icon: "#icon-shangpin",
          nm: "商品",
        },
        {
          icon: "#icon-xiaoxi",
          nm: "帮助",
        },
        {
          icon: "#icon-zuanshi",
          nm: "精选",
        },
        {
          icon: "#icon-shezhi",
          nm: "设置",
        },
      ],
      show: false,
      money: "",
    };
  },
  methods: {
    showPopup(nm) {
      if (nm == "余额") {
        this.show = true;
      }
    },
    addMoney(num) {
      this.money = "";
      this.$store.commit("addMoney", num);
      this.show = false;
    },
    // ...mapMutations({
    //   addMoney: "addMoney",
    // }),
  },

  // 使用计算属性，
  computed: {
    // 直接解构数据状态
    ...mapState(["myMoney"]),
  },
};
</script>

<style lang="scss" scoped>
// 个人页面
.my-info {
  background-color: #f4f4f4;
  height: 100vh;
  width: 100vw;
  // 上面
  .user-top {
    height: 170px;
    background-color: #ff8526;
    color: #fff;
    font-size: 14px;
    position: relative;
    // 头像登陆
    .login {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      // padding-left: 30px;
      position: absolute;
      top: 30px;
      left: 30px;
      .imgs {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        // border-radius: 50%;
        img {
          width: 100%;
          border-radius: 50%;
        }
      }
    }

    // 订单
    .order {
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;

      height: 60px;
      background-color: #fff;

      display: flex;
      justify-content: space-around;
      align-items: center;

      color: #babdc0;
      .order-list {
        text-align: center;
        font-size: 12px;

        .order-img {
          font-size: 22px;
          margin-bottom: 7px;
        }
      }
    }
  }

  // 列表
  .my-list {
    background-color: #fff;
    margin-top: 10px;
    .my-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .icon-box {
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        font-size: 18px;
      }
      .nm {
        font-size: 14px;
        flex: 1;
      }
    }
  }

  // 充值
  .add-money-box {
    h3 {
      text-align: center;
      font-size: 24px;
      height: 60px;
      line-height: 40px;
    }
    // 金额
    .add-money {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 20px;
      p {
        width: 100px;
      }
      .input {
        // width: 100px;
        flex: 1;
        padding-left: 2px;
        input {
          width: 90%;
          border-radius: 3px;
        }
      }
      span {
        width: 40px;
      }
    }
    // 按钮
    .btn {
      color: #fff;
      background-color: #39b5e7;
      width: 100px;
      height: 40px;
      line-height: 40px;
      margin: 30px auto 20px;
      border-radius: 5px;

      text-align: center;
      font-size: 22px;
    }
  }
}
</style>

<style >
.add-money-box .van-popup--center {
  width: 250px;
  height: 200px;
  padding: 10px;
}
</style>

